<template>
  <v-container>
    <div>
      <v-dialog v-model="dialog" persistent max-width="600px">
        <v-card>
          <v-card-title>
            <span class="headline">修改预约状态</span>
          </v-card-title>
          <v-card-text>
            <v-radio-group v-model="status">
              <v-radio label="未处理" value="1"></v-radio>
              <v-radio label="开始受理" value="2"></v-radio>
              <v-radio label="已受理" value="3"></v-radio>
              <v-radio label="拒绝受理" value="-1"></v-radio>
            </v-radio-group>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn text @click="dialog = false">取消</v-btn>
            <v-btn color="primary" text @click="update()">确认</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
      <v-dialog v-model="dialog2" persistent max-width="600px">
        <v-card>
          <v-card-title>
            <span class="headline">输入联系人电话</span>
          </v-card-title>
          <v-card-text>
            <v-text-field v-model="linkman"></v-text-field>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn text @click="update2()">确认</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
      <v-row align="center" justify="center">
        <v-col cols="12" sm="8" md="6" lg="6">
          <v-card>
            <v-card-title>
              <h4>预约详情</h4>
            </v-card-title>
            <v-divider></v-divider>
            <v-list dense>
              <v-list-item>
                <v-list-item-content>预约单编号:</v-list-item-content>
                <v-list-item-content class="align-end">{{responseData.id}}</v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>组织名称:</v-list-item-content>
                <v-list-item-content class="align-end">{{responseData.orgnization}}</v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>拍摄内容:</v-list-item-content>
                <v-list-item-content class="align-end">{{responseData.content}}</v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>所需人数:</v-list-item-content>
                <v-list-item-content class="align-end">{{responseData.count}}</v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>拍摄时间:</v-list-item-content>
                <v-list-item-content class="align-end">{{responseData.time}}</v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>联系人:</v-list-item-content>
                <v-list-item-content class="align-end">{{responseData.username}}</v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>联系方式:</v-list-item-content>
                <v-list-item-content class="align-end">{{responseData.phone}}</v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>邮箱地址:</v-list-item-content>
                <v-list-item-content class="align-end">{{responseData.mail}}</v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>备注:</v-list-item-content>
                <v-list-item-content class="align-end">{{responseData.remark}}</v-list-item-content>
              </v-list-item>
              <v-list-item v-if="responseData.file!=null">
                <v-list-item-content>附件:</v-list-item-content>
                <v-list-item-content class="align-end">
                  <a :href="'http://www.hdufocus.cn:8081/file/'+responseData.file">点击下载</a>
                </v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-content>受理状态:</v-list-item-content>
                <v-list-item-content class="align-end">{{responseData.status}}</v-list-item-content>
              </v-list-item>
              <v-list-item v-if="responseData.status==3">
                <v-list-item-content>我方联络员电话:</v-list-item-content>
                <v-list-item-content class="align-end">{{responseData.linkman}}</v-list-item-content>
              </v-list-item>
            </v-list>
            <v-divider class="mx-4"></v-divider>
            <v-card-actions>
              <v-btn color="green" text @click="dialog=true">
                <div class="title font-weight-bold">处理预约</div>
              </v-btn>
              <v-btn color="red" text>
                <div class="title font-weight-bold">删除预约</div>
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
      </v-row>
      <div class="text-center">
        <v-btn class="mt-3" color="primary" @click="submit()">返回</v-btn>
      </div>
      <v-snackbar v-model="snackbar" timeout="2000">
        {{ text }}
        <v-btn color="red" text @click="snackbar = false">Close</v-btn>
      </v-snackbar>
    </div>
  </v-container>
</template>
<script>
export default {
  data: () => ({
    dialog: false,
    dialog2: false,
    text: "保存成功",
    snackbar: false,
    status: 2,
    id: "",
    responseData: {},
    linkman: ""
  }),
  mounted: function() {
    this.id = this.$route.query.id;
    this.loadData();
  },
  methods: {
    loadData: function() {
      const that = this;
      this.axios
        .get("http://www.hdufocus.cn:8081/reservation/search", {
          params: {
            id: that.id
          }
        })
        .then(function(response) {
          const status = response.status;
          if (status == 200) {
            that.responseData = response.data.data;
          }
        });
    },
    submit: function() {
      this.$router.go(-1);
    },
    update: function() {
      const that = this;
      var token = "";
      token = localStorage.getItem("token");
      if (this.status == 3) {
        this.dialog2 = true;
        this.dialog = false;
      } else {
        this.axios({
          method: "get",
          url: "http://www.hdufocus.cn:8081/reservation/updateStatus",
          headers: {
            Authorization: token
          },
          params: { id: that.id, status: that.status }
        })
          .catch(function() {
            that.$router.push({ path: "/login" });
          })
          .then(function(response) {
            const status = response.status;
            if (status == 200) {
              that.dialog = false;
              that.loadData();
              that.snackbar = true;
            }
          });
      }
    },
    update2: function() {
      const that = this;
      var token = "";
      token = localStorage.getItem("token");
      this.axios({
        method: "get",
        url: "http://www.hdufocus.cn:8081/reservation/updateLinkman",
        headers: {
          Authorization: token
        },
        params: { id: that.id, linkman: that.linkman }
      });
      this.axios({
        method: "get",
        url: "http://www.hdufocus.cn:8081/reservation/updateStatus",
        headers: {
          Authorization: token
        },
        params: { id: that.id, status: that.status }
      })
        .catch(function() {
          that.$router.push({ path: "/login" });
        })
        .then(function(response) {
          const status = response.status;
          if (status == 200) {
            that.dialog2 = false;
            that.loadData();
            that.snackbar = true;
          }
        });
    }
  }
};
</script>